import { useQuery } from '@tanstack/react-query';

import commonService from '@/api/services/commonService';

import AboutBlock from './about';
import BannerBlock from './banner';
import BuyBlock from './buy';
import DesignBlock from './design';
import HotBlock from './hot';
import HotTextBlock from './hotText';
import RecommendBlock from './recommend';
import ResearchBlock from './research';
import SocialBlock from './social';
import TopicBlock from './topic';

export default function IndexPage() {
  const { data = {}, refetch } = useQuery({
    queryKey: ['mall'],
    queryFn: async () => {
      return commonService.getFrontApi('index', {});
    },
  });

  return (
    <div className="flex flex-col">
      {data.indexTopBanner ? <BannerBlock list={data.indexTopBanner} /> : ''}
      {data.textHref ? <HotTextBlock list={data.textHref} /> : ''}
      <div className="flex flex-col gap-[100px]">
        {data.upvList ? <RecommendBlock refetch={refetch} list={data.upvList} /> : ''}
        {data.indexHotSocialize ? <SocialBlock info={data.indexHotSocialize} /> : ''}
        {data.indexHotTopic ? <TopicBlock list={data.indexHotTopic} /> : ''}
        {data.designNow ? <DesignBlock info={data.designNow} /> : ''}
        {data.ppList ? <HotBlock refetch={refetch} list={data.ppList} /> : ''}
        {data.buyNow ? <BuyBlock info={data.buyNow} /> : ''}
        {data.discoverYourWorld ? <ResearchBlock list={data.discoverYourWorld} /> : ''}
        {data.indexAboutUs ? <AboutBlock info={data.indexAboutUs} /> : ''}
      </div>
    </div>
  );
}
